<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="1800" destroy-on-close @closed="close" :close-on-click-modal="false" :close-on-press-escape="mode != 'show' ? false : true" align-center @submit.prevent>
        <el-form :model="form" :rules="rules" :disabled="mode=='show'" label-width="100" ref="dialogForm">
            <div class="flex">
                <div style="width: 30%;">
                    <div style="display: flex;align-items: center;">
                        <el-input v-model="bar_code" ref="barCodeInput" placeholder="放入条码" style="width: 200px" @keyup.enter="getTable()" @input="timeInput"></el-input>
                        <span style="margin-left: 10px;">待入库: {{can_ware_number}}</span>
                        <span style="margin-left: 10px;">已入库: {{ware_number}}</span>
                    </div>
                </div>
            </div>
             <div style="height: 600px;"><!-- display: flex;justify-content: center; -->
                <el-auto-resizer>
                    <template #default="{ width, height }">
                        <el-table-v2 border :columns="columns" :data="form.detail" :width="width" :height="height" row-key="index" @select-change="handleSelectChange" :row-height="40" />
                    </template>
                </el-auto-resizer>
            </div>
            <!-- <sc-form-table class="formtable" ref="table" v-model="form.detail" hideAdd hideDelete placeholder="暂无数据" height="600" showIndex>
                <el-table-column label="条码" align="center" prop="flower">
                    <template #default="scope">
                        {{scope.row.roll_code}}
                    </template>
                </el-table-column>
                <el-table-column label="品名" align="center" prop="flower">
                    <template #default="scope">
                        {{scope.row.goods_name}}
                    </template>
                </el-table-column>
                <el-table-column label="Color" align="center" prop="flower">
                    <template #default="scope">
                        {{scope.row.colorName}}
                    </template>
                </el-table-column>
                <el-table-column label="货号" align="center" prop="flower">
                    <template #default="scope">
                        {{scope.row.goods_code}}
                    </template>
                </el-table-column>
                <el-table-column label="花型" align="center" prop="flower">
                    <template #default="scope">
                        {{scope.row.flower}}
                    </template>
                </el-table-column>
                <el-table-column label="供应商" align="center" prop="flower">
                    <template #default="scope">
                        {{scope.row.apply_name}}
                    </template>
                </el-table-column>
                <el-table-column label="净重" align="center" prop="flower">
                    <template #default="scope">
                        {{scope.row.net_weight}}
                    </template>
                </el-table-column>
                <el-table-column label="米数/码数" align="center" prop="flower">
                    <template #default="scope">
                        {{scope.row.meter}} / {{scope.row.code_number}}
                    </template>
                </el-table-column>
                <el-table-column label="克重" align="center" prop="flower">
                    <template #default="scope">
                        {{scope.row.gram_weight}}
                    </template>
                </el-table-column>
                <el-table-column label="数量" align="center" prop="number"></el-table-column>
            </sc-form-table> -->
        </el-form>
        <template #footer>
			<!-- <el-button @click="visible = false">取 消</el-button>
			<el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit(0)">保存</el-button> -->
        </template>
    </el-dialog>
</template>

<script>

import config from '@/config'
export default {
    emits: ['success', 'closed'],
    data() {
        return {
            mode: "add",
            titleMap: {
                add: '新增发货单',
                copy: '新增发货单',
                edit: '入库',
                show: '查看发货单',
            },
            visible: false,
            isSaveing: false,
            form: {
                send_id: "",
                ware_id: "",
                detail: [],
            },
            rules: {
                // ware_id: [ {required: true, message: '请选择仓库'} ],
            },
            bar_code: "",
            remove_bar_code: "",
            can_ware_number: 0,
            ware_number: 0,
            table_index: 0,
            is_change: false,
            columns: [
                {
                    title: '序号',
                    dataKey: 'index',
                    width: 80,
                    align: 'center'
                },
                {
                    title: '条码',
                    dataKey: 'roll_code',
                    width: 180,
                    align: 'center'
                }, 
                {
                    title: '品名',
                    dataKey: 'goods_name',
                    width: 180,
                    align: 'center',
                },
                {
                    title: 'Color',
                    dataKey: 'colorName',
                    width: 180,
                    align: 'center',
                },
                {
                    title: '货号',
                    dataKey: 'goods_code',
                    width: 180,
                    align: 'center',
                },
                {
                    title: '花型',
                    dataKey: 'flower',
                    width: 180,
                    align: 'center',
                },
                {
                    title: '供应商',
                    dataKey: 'apply_name',
                    width: 180,
                    align: 'center',
                },
                {
                    title: '净重',
                    dataKey: 'net_weight',
                    width: 180,
                    align: 'center',
                },
                {
                    title: '米数',
                    dataKey: 'meter',
                    width: 180,
                    align: 'center',
                },
                {
                    title: '码数',
                    dataKey: 'code_number',
                    width: 180,
                    align: 'center',
                },
                {
                    title: '克重',
                    dataKey: 'gram_weight',
                    width: 180,
                    align: 'center',
                },
                {
                    title: '数量',
                    dataKey: 'number',
                    width: 180,
                    align: 'center',
                },
            ],
        }
    },
    mounted() {
    },
    methods: {
        close() {
            this.$emit('closed')
            if(this.is_change){
                this.$emit('success', this.form, this.mode)
            }
        },
        //显示
        open(mode = 'add') {
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单注入数据
        async setData(data) {
            this.form.send_id = data.id
            this.form.ware_id = data.area?.ware_id
            this.ware_number = data.ware_number
            this.can_ware_number = Number(data.total_count) - Number(data.ware_number)
        },
        async getTable(){
            this.is_change = true
            if(!this.bar_code) return
            var res = await this.$API.ware.ware.scan.get({roll_code: this.bar_code,action_type: 3,send_id: this.form.send_id})
            if(res.code == 1){
                const successAudio = new Audio(`${config.API_URL}//audio/ok.wav`);
                successAudio.play();
                const maxIndex = this.form.detail.length > 0 ? Math.max(...this.form.detail.map(item => item.index)) : 0
                const newIndex = maxIndex + 1
                let array = []
                let form = {
                    index: newIndex,
                    inspect_id: res.data.inspect?.id,
                    roll_code: res.data.inspect?.roll_code,
                    goods_code: res.data.inspect?.goods_code,
                    goods_name: res.data.inspect?.goods_name,
                    net_weight: res.data.inspect?.net_weight,
                    code_number: res.data.inspect?.code_number,
                    folding: res.data.inspect?.folding?.name,
                    gram_weight: res.data.inspect?.gram_weight,
                    color: res.data.inspect?.color,
                    colorName: res.data.inspect?.color_en,
                    flower: res.data.inspect?.flower,
                    cost_price: res.data.inspect?.ware?.price,
                    meter: res.data.inspect?.meter,
                    number: 1,
                    apply_name: res.data.inspect?.apply_name,
                }
                this.bar_code = ""
                setTimeout(()=>{
                    array.push(form)
                    this.form.detail = [...array, ...this.form.detail]
                },10)
                this.ware_number += 1
                this.can_ware_number -= 1
            }else{
                // 创建新的Audio实例播放错误声音，避免连续播放时相互干扰
                if(res.code == 0){
                    const errorAudio = new Audio(`${config.API_URL}/audio/error.wav`);
                    errorAudio.play();
                }else if(res.code == 2){
                    const doubleAudio = new Audio(`${config.API_URL}/audio/uk_double.wav`);
                    doubleAudio.play();
                }else if(res.code == 3){
                    const existentAudio = new Audio(`${config.API_URL}/audio/uk_non-existent.wav`);
                    existentAudio.play();
                }
                this.$message.error(res.message)
                this.$refs.barCodeInput.select()
            }

            // const successAudio = new Audio(`${config.API_URL}//audio/ok.wav`);
            // successAudio.play();
            // const maxIndex = this.form.detail.length > 0 ? Math.max(...this.form.detail.map(item => item.index)) : 0
            // const newIndex = maxIndex + 1
            // let array = []
            // let form = {
            //     index: newIndex,
            //     roll_code: this.bar_code,
            // }
            // setTimeout(()=>{
            //     array.push(form)
            //     this.form.detail = [...array, ...this.form.detail]
            // },10)
            // this.bar_code = ""
            // this.ware_number += 1
            // this.can_ware_number -= 1
        },
    }
}
</script>

<style lang="scss" scoped>
.flex{
    display: flex;
    justify-content: space-between;
}
</style>
